<template>
  <div id="pageMonitor">
    <div class="monitor-content">
         <div class="monitor-content-box">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="信息列表" name="first">
                    <info-list
                    :infoListData="infoListData">
                    </info-list>
                </el-tab-pane>
                <el-tab-pane label="数据分析" name="second">
                  <data-analysis
                  :activeName="activeName">
                  </data-analysis>
                </el-tab-pane>
                <el-tab-pane label="定向监测" name="third">
                  <direct-monite></direct-monite>
                </el-tab-pane>
                <el-tab-pane label="预警设置" name="four">
                  <warn-set
                  :warnSetData="warnSetData"
                  ></warn-set>
                </el-tab-pane>
            </el-tabs>
         </div>
    </div>
  </div>
</template>

<script>
import '../../assets/css/monitor.css'
import infoList from '../../view/monitor/infoList.vue'
import dataAnalysis from '../../view/monitor/dataAnalysis.vue'
import directMonite from '../../view/monitor/directMonite.vue'
import warnSet from '../../view/monitor/warnSet.vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
        activeName: 'first',
        caseId: '',
        infoListData:{
          caseId: '',
          areaOption:[],
          typeResourceList: []
        },
        warnSetData:{
          caseId: '',
          typeResourceList: []
        }
    }
  },
  created(){
    if (this.$route.path) {
      let id = this.$route.path.split('/');
      this.caseId = id[2];
      this.infoListData.caseId = this.caseId;
      this.warnSetData.caseId = this.caseId;
      this.sysArea();
      this.sysDataSource();
      this.getCondition();
      this.getWarnSetData();
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    sysArea(){
      this.$Api.sysArea().then(res => {
        if(res.code == '200'){
          this.infoListData.areaOption = [];
          this.infoListData.areaOption.push({
            value: "1", 
            label: "全部"
          })
          for (let i = 0; i < res.data.length; i++) {
            let obj = {};
            obj.value = res.data[i].id;
            obj.label = res.data[i].dictValue;
            this.infoListData.areaOption.push(obj)
          }
        }
      })
    },
    sysDataSource(){
      this.$Api.sysDataSource().then(res => {
        if(res.code == '200'){
          this.infoListData.typeResourceList = [];
          this.warnSetData.typeResourceList = [];
          for (let i = 0; i < res.data.length; i++) {
            let obj = {};
            obj.value = res.data[i].dictLabel;
            obj.label = res.data[i].dictValue;
            this.infoListData.typeResourceList.push(obj);
            this.warnSetData.typeResourceList.push(obj);
          }
          this.warnSetData.typeResourceList.splice(0,1);
        }
      })
    },
    getCondition(){
      let param = this.caseId;
      this.$Api.getCondition(param).then((res) => {
        if(res.code == '200'){
          this.$bus.$emit('infoFilter', res.data)
        }
      })
    },
    getWarnSetData(){
      let param = this.caseId;
      this.$Api.warnSetting(param).then(res => {
          console.log(res);
          // if(res.code == '200'){
          //   this.refreshAside()
          // }
      })
    }
  },
  watch: {
      $route() {
        if (this.$route.path) {
          let id = this.$route.path.split('/');
          this.caseId = id[2];
          this.infoListData.caseId = this.caseId;
          this.warnSetData.caseId = this.caseId;
          this.sysArea();
          this.sysDataSource();
          this.getCondition();
          this.getWarnSetData();
        }
      }
    },
  components:{
    'info-list': infoList,
    'data-analysis': dataAnalysis,
    'direct-monite': directMonite,
    'warn-set': warnSet
  }
}
</script>
<style>
/* #pageHome{
background: #ccc;
width:calc(100% - 200px);
} */

</style>
